import styles from './index.module.less'
import Box from '@/components/Common/Box'
import Searcher from '@/components/Common/Searcher'
import { confirmTask } from '../api'
import { ConfirmEnum } from '../enum'
import { InfiniteScroll, Button, Divider, Tag, Dialog, Empty } from 'antd-mobile'
import { useFetchPageList } from '../../../hooks/useFetchPageList'
import { SkeletonParagraphWrap } from '@/components/Common/Skeleton'
import MoreLoader from '@/components/Common/MoreLoader'
import type { TaskListData } from './interface'
import type { SearchOption } from '@/components/Common/Searcher/interface'

export const DispatchTask = () => {
    const paramsOption: SearchOption[] = [
        { label: '类别', param: 'category' },
        { label: '地点', param: 'region' },
    ]

    const {
        dataList,
        hasMore,
        loading,
        loadMore,
        refreshList,
        updateFilterParams,
    } = useFetchPageList<TaskListData>(`/engineer/teacher/dispatch/task`)

    const onConfirm = async (id: number) => {
        await Dialog.confirm({
            closeOnMaskClick: true,
            title: '接受派遣',
            content: '是否接受该派遣任务',
            cancelText: '拒绝',
            confirmText: '接受',
            onConfirm: async () => {
                await confirmTask(id, ConfirmEnum.ACCEPT)
                refreshList()
            },
            onCancel: async () => {
                await confirmTask(id, ConfirmEnum.REJECT)
                refreshList()
            },
        })
    }

    const getStatus = (status: ConfirmEnum) => {
        switch (status) {
            case ConfirmEnum.WAIT:
                return <Tag color={'warning'}>待接受</Tag>
            case ConfirmEnum.ACCEPT:
                return <Tag color={'success'}>已接受</Tag>
            case ConfirmEnum.REJECT:
                return <Tag color={'danger'}>已拒绝</Tag>
            default:
                return <Tag color={'default'}>未知</Tag>
        }
    }

    return (
        <div>
            <Searcher
                options={paramsOption}
                onParamValueChange={(param, value) => {
                    updateFilterParams({ [param]: value })
                }}
            />

            <div className={styles.content}>
                <SkeletonParagraphWrap
                    animated
                    lineCount={10}
                    loading={dataList.length === 0 && loading}
                >
                    {dataList.length > 0 && (
                        <>
                            <div className={styles.list}>
                                {dataList?.map(
                                    ({ id, name, is_confirm, region, begin_date, end_date }) => {
                                        return (
                                            <Box
                                                key={id}
                                                title={name}
                                                className={styles.list_box}
                                                statusBar={getStatus(is_confirm)}
                                            >
                                                <div className={styles.list_item}>
                                                    <span>地点：{region}</span>
                                                    <span>
                                                        培训时间：{`${begin_date}至${end_date}`}
                                                    </span>
                                                    {is_confirm === ConfirmEnum.WAIT && (
                                                        <>
                                                            <Divider
                                                                className={styles.list_item_line}
                                                            />
                                                            <div
                                                                className={styles.list_item_operate}
                                                            >
                                                                <Button
                                                                    className={styles.acceptButton}
                                                                    onClick={() => {
                                                                        onConfirm(id)
                                                                    }}
                                                                >
                                                                    接受派遣
                                                                </Button>
                                                            </div>
                                                        </>
                                                    )}
                                                </div>
                                            </Box>
                                        )
                                    },
                                )}
                            </div>

                            <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                                <MoreLoader hasMore={hasMore} />
                            </InfiniteScroll>
                        </>
                    )}

                    {dataList.length === 0 && <Empty description="暂无数据" />}
                </SkeletonParagraphWrap>
            </div>
        </div>
    )
}

export default DispatchTask
